<template>
	<view class="login-page">
		<view class="back">
			<img @click="backlogin" src="/static/image/back.png" style="height: 100%;" alt="" />
		</view>
		<!-- <navigation :navigationMsg="navigationMsg"></navigation> -->
		<view class="main">
			<view class="logo"></view>
			<view class="login-box">
				<view class="u-demo-block">
					<view class="u-demo-block__content">
						<!-- #ifndef APP-NVUE -->
						<u-input v-model="tel" placeholder="请输入手机号" border="none">
						<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							<u--input>
							<!-- #endif -->
								<u--text text="手机号" slot="prefix" margin="0 20px 0 0" type="tips"></u--text>
						<!-- #ifndef APP-NVUE -->
						</u-input>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						</u--input>
						<!-- #endif -->
					</view>
					<view class="u-demo-block__content" style="margin-top: 15px;">
						<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
						<!-- #ifndef APP-NVUE -->
						<u-input maxlength="6" v-model="captcha" placeholder="请输入验证码" border="none">
						<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							<u--input>
							<!-- #endif -->
								<u--text text="验证码" slot="prefix" margin="0 20px 0 0" type="tips"></u--text>
								<template slot="suffix">
									<u-code ref="uCode" @change="codeChange" seconds="120" changeText="X秒重新获取"></u-code>
									<u-text @tap="getCode" color="#37a987" :text="tips" size="mini"></u-text>
								</template>
						<!-- #ifndef APP-NVUE -->
						</u-input>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						</u--input>
						<!-- #endif -->
					</view>
				</view>
			</view>
			<view class="login-btn">
				<view class="btn" @click="login">
					登录
				</view>
				<div class="text">
					登录即代表阅读并同意<span @click="userAgreement">《用户协议》</span>
				</div>
			</view>
		</view>
	</view>
</template>

<script>
	import navigation from "@/components/navigation.vue"
	export default {
		data() {
			return {
				navigationMsg: {
					title: "登录",
					bgColor: "white",
					leftArrow: true,
					backgroundImage: "/static/navigation/leftArrow_green.svg",
				},
				tips: "",
				tel: "",
				captcha: ""
			}
		},
		components: {
			navigation
		},
		methods: {
			backlogin() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				let reg = /^(?:(?:\+|00)86)?1\d{10}$/
				if (!reg.test(this.tel)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				} else {
					if (this.$refs.uCode.canGetCode) {
						console.log(this.tel)

						let data = {
							mobile: this.tel,
							type: "login"
						}
						console.log(data)
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						// uni.request({
						// 	url:"/api/login/send_code",
						// 	method:"GET",
						// 	data:data,
						// 	success(res) {
						// 		console.log(res)
						// 	}
						// })

						// this.$ajax.post({
						// 	url: `/api/login/send_code`,

						// }).then((res) => {
						// 		console.log(res.data)			
						// })

						// 请求验证码
						uni.request({
							url: "/api/login/send_code",
							method: "GET",
							data: {
								mobile: this.tel,
								type: "login"
							}
						}).then(res => {
							// console.log(res);
							if (res.data.code === 1) {
								setTimeout(() => {
									uni.hideLoading();
									// 这里此提示会被this.start()方法中的提示覆盖
									// uni.$u.toast('验证码已发送');
									uni.$u.toast(res.data.msg);
									// 通知验证码组件内部开始倒计时
									this.$refs.uCode.start();
								}, 2000);
							} else {
								uni.hideLoading();
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
							}
						}).catch(error => {
							console.error("验证码请求出错", error);
						});

					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				}
			},
			change(e) {
				console.log('change', e);
			},
			//用户协议
			userAgreement() {
				uni.navigateTo({
					url: "/components/userAgreement/userAgreement"
				})
			},
			//登录

			login() {
				if (!this.tel) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				if (!this.captcha) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				}
				let data = {
					mobile: this.tel,
					code: this.captcha
				}
				uni.request({
					url: "/api/login/register",
					method: "GET",
					data
				}).then(res => {
					console.log(res);
					if (res.data.msg == "验证码错误") {
						uni.showToast({
							title: "验证码错误",
							icon: 'none'
						})
						return
					}
					if (res.data.code == 1) {
						uni.setStorageSync("token", res.data.data.userInfo.token)
						uni.setStorageSync("user", res.data)
						uni.switchTab({
							url: "/pages/My/My"
						})

					} else {
						console.error("登录请求失败", res.statusCode);
					}
				}).catch(error => {
					console.error("登录请求出错", error);
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-page {
		width: 100vw;
		height: 100vh;

		.back {
			width: 100%;
			height: 10vw;
			// background-color: aqua;
		}

		.main {
			width: 85%;
			height: 1000rpx;
			margin: auto;
			margin-top: 100rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;

			.logo {
				width: 300rpx;
				height: 110rpx;
				background-image: url("/static/index/top-nav/logo.png");
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
			}

			.login-box {
				width: 100%;
				height: 300rpx;

				.u-demo-block {
					display: flex;
					height: 100%;
					flex-direction: column;
					justify-content: space-around;

					.u-input {
						height: 100rpx;
						border-bottom: 1px solid #acacac;
					}
				}
			}

			.login-btn {
				width: 400rpx;
				height: 180rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;

				.btn {
					width: 380rpx;
					height: 90rpx;
					background-color: #37a987;
					text-align: center;
					line-height: 90rpx;
					font-size: 30rpx;
					color: white;
					border-radius: 50rpx;
					-webkit-box-shadow: 0px 12px 24px 0px rgba(50, 50, 50, 0.29);
					-moz-box-shadow: 0px 12px 24px 0px rgba(50, 50, 50, 0.29);
					box-shadow: 0px 12px 24px 0px rgba(50, 50, 50, 0.29);
				}

				.text {
					width: 400rpx;
					height: 50rpx;
					font-size: 26rpx;
					text-align: center;

					>span {
						color: #3588e5;
					}
				}
			}
		}
	}
</style>